@import './icon.scss';

.vxp-tag {
  @include basis;

  display: inline-flex;
  align-items: center;
  padding: 0 0.5em;
  background-color: $vxp-color-fill-background;
  border: $vxp-border-base;
  border-radius: $vxp-border-radius-base;
  transition: $vxp-transition-color-base, $vxp-transition-background-base;

  & + & {
    margin-left: 0.3em;
  }

  &__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 12px;
    margin-top: 1px;
    margin-left: 0.5em;
    color: $vxp-color-content-secondary;
    cursor: pointer;
    opacity: 0.6;
    transition: $vxp-transition-opacity-base;

    &:hover {
      opacity: 1;
    }
  }

  $close: #{&}__close;

  $types: (
    // state
    primary: $vxp-color-primary,
    info: $vxp-color-info,
    success: $vxp-color-success,
    error: $vxp-color-error,
    warning: $vxp-color-warning,
    // named color
    'lime': rgb(18, 228, 83),
    'pink': rgb(240, 101, 149),
    'magenta': rgb(235, 47, 150),
    'tomato': rgb(250, 99, 99),
    'orange': rgb(255, 146, 43),
    'cyan': rgb(19, 194, 194),
    'navy': rgb(47, 65, 224),
    'gold': rgb(236, 202, 11),
    'purple': rgb(114, 46, 209)
  );

  @each $type in map-keys($map: $types) {
    $color: map-get(
      $map: $types,
      $key: $type
    );

    @at-root {
      &--#{$type} {
        color: $vxp-color-content-reverse;
        background-color: $color;
        border-color: $color;

        #{$close} {
          color: $vxp-color-content-reverse;
        }
      }

      &--border#{&}--#{$type},
      &--simple#{&}--#{$type} {
        color: $color;

        #{$close} {
          color: $color;
        }
      }

      &--simple#{&}--#{$type} {
        background-color: mix($vxp-color-white, $color, 85%);
      }
    }
  }

  &--border {
    background-color: transparent;
  }
}
